async function func () {
  // ------------- 1.获取首页的数据 -------------
  const res = await axios({
    url: '/dashboard'
  })
  console.log('res:', res)
  // 解构数据
  const { overview, year, salaryData, groupData, provinceData } = res.data
  // ------------- 2.渲染顶部的数据 -------------

  for (const key in overview) {
    // 通过key来生成 选择器 获取dom元素 设置内容
    // 对象[key],动态的获取指定属性的值
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }

  // ------------- 年度薪资分布 -------------
  function yearSalary (year) {
    /*
        核心步骤:
        1. 初始化 (根据需求传入不同的dom元素)
        2. 设置选项
        3. 基于选项渲染图表 (基本是固定的)
      */
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 数据处理
    // 获取月
    const months = year.map(v => v.month)
    // 获取待遇
    const salarys = year.map(v => v.salary)

    // 指定图表的配置项和数据
    const option = {
      // 标题
      title: { text: '2021年全学科薪资走势' },
      // x轴的样式
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: months,
        // 线段
        axisLine: {
          // 线的样式
          lineStyle: {
            color: 'gray', // 颜色
            type: 'dashed'
          }
        }
      },
      // 提示框 设置了该属性 就会显示提示框
      tooltip: {},
      yAxis: {
        type: 'value',
        // 分割线
        splitLine: {
          show: true, // 显示
          // 线的样式
          lineStyle: {
            color: ['#d6d6d6'], // 颜色
            type: 'dashed' // 类型
          }
        }
      },
      // 绘图网格
      grid: {
        left: 50, // 左侧的间隙
        right: 20,
        bottom: 30
      },
      // 图形的颜色
      color: ['#608cff'],
      series: [
        {
          // 具体的数据
          data: salarys,
          // 平滑曲线
          smooth: true,
          type: 'line',
          // 标记的大小
          symbolSize: 15,
          // 线段的样式
          lineStyle: {
            width: 8 // 粗细
          },
          // 区域的样式
          areaStyle: {
            // 区域的颜色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, // 开头
                  color: '#52a1fa' // 0% 处的颜色
                },
                {
                  offset: 0.8, // 结尾
                  color: '#ffffff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  yearSalary(year)

  // ------------- 班级薪资分布 -------------
  function classSalary (salaryData) {
    /*
        核心步骤:
        1. 初始化 (根据需求传入不同的dom元素)
        2. 设置选项
        3. 基于选项渲染图表 (基本是固定的)
      */
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#salary'))
    // 数据转换
    const data = salaryData.map(v => {
      // 老数组中对象的属性 设置给返回对象的 新属性
      return {
        value: v.g_count + v.b_count,
        name: v.label
      }
    })
    // console.log('data:', data)

    // 指定图表的配置项和数据
    const option = {
      // 标题
      title: {
        text: '班级薪资分布'
      },
      tooltip: {
        trigger: 'item'
      },
      // 图例
      legend: {
        bottom: '30', // 底部的间隙
        left: 'center' // 局中
      },
      // 调色盘 会依次使用传入的颜色
      color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
      series: [
        // 数据项
        {
          name: 'Access From',
          type: 'pie', // 饼
          radius: ['55%', '70%'], // 内外圆的半径
          avoidLabelOverlap: false,
          // 区域样式
          itemStyle: {
            borderRadius: 40, // 区域间隔的圆形道教
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          // 饼图的数据
          data // data: data
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  classSalary(salaryData)

  // ------------- 班级每组薪资  -------------
  function groupSalary (groupData) {
    const myChart = echarts.init(document.querySelector('#lines'))

    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: 'category',
        // 轴线
        axisLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed',
            // 颜色
            color: '#bebebe'
          }
        },
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // 默认渲染第一个的数据
        data: groupData[1].map(v => v.name)
      },
      // 提示框
      tooltip: {},
      // 颜色
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#65dcb2' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d2f0e7' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4a9fed' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#d6e7f6' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      // y轴
      yAxis: {
        type: 'value',
        // 分割线
        splitLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: 'dashed'
          }
        }
      },
      // 绘图网格
      grid: {
        left: 50,
        right: 40
      },
      series: [
        // 多个图表
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          // 默认渲染第一个的期望薪资
          data: groupData[1].map(v => v.hope_salary),
          type: 'bar'
        },
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          // 默认渲染第一个的 实际薪资
          data: groupData[1].map(v => v.salary),
          type: 'bar'
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // 点击按钮的高亮切换 forEach 定义在nodeList的原型上
    document.querySelectorAll('#btns button').forEach(item => {
      item.addEventListener('click', function () {
        // 移除其他的高亮
        document.querySelector('.btn-blue').classList.remove('btn-blue')
        // 高亮自己
        this.classList.add('btn-blue')

        // 获取到 对应的数据
        const index = this.innerHTML.trim()
        // console.log('index:', index)
        const data = groupData[index]
        // console.log('data:', data)
        // 更新option 底部的名字
        option.xAxis.data = data.map(v => v.name)
        // 更新option 期望薪资
        option.series[0].data = data.map(v => v.hope_salary)
        // 更新option 实际薪资
        option.series[1].data = data.map(v => v.salary)
        // 调用 setOption方法 传入修改完毕的 option
        myChart.setOption(option)
      })
    })

    // 测试 setOption是否会更新图表
    // setTimeout(() => {
    //   // 第一个图表的 data数据
    //   option.series[0].data = [220, 100, 350, 180, 20, 160, 200]
    //   myChart.setOption(option)
    // }, 5000)
  }
  groupSalary(groupData)

  // ------------- 男女薪资分布 -------------
  function bgSalary (salaryData) {
    const myChart = echarts.init(document.querySelector('#gender'))

    // 指定图表的配置项和数据
    const option = {
      title: [
        {
          text: '男女薪资分布'
        },
        {
          text: '男生',
          left: 'center',
          top: '48%',
          textStyle: {
            fontSize: '15'
          }
        },
        {
          text: '女生',
          left: 'center',
          top: '88%',
          textStyle: {
            fontSize: '15'
          }
        }
      ],
      tooltip: {
        trigger: 'item'
      },
      // 颜色
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      series: [
        {
          name: 'Access From',
          type: 'pie',
          // 内外半径
          radius: ['20%', '30%'],
          // 位置
          center: ['50%', '30%'],
          // 男生数据
          data: salaryData.map(v => {
            return {
              value: v.b_count,
              name: v.label
            }
          }),
          //   [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          // 女生数据
          data: salaryData.map(v => {
            return {
              value: v.g_count,
              name: v.label
            }
          }),
          // [
          // { value: 1048, name: 'Search Engine' },
          // { value: 735, name: 'Direct' },
          // { value: 580, name: 'Email' },
          // { value: 484, name: 'Union Ads' },
          // { value: 300, name: 'Video Ads' }
          // ]
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  bgSalary(salaryData)

  // ------------- 地域分布 -------------
  function initMapChart (provinceData) {
    // 基于dom元素 初始化ECharts
    const myEchart = echarts.init(document.querySelector('#map'))

    // 地域数据
    // 基于服务器的数据 筛选出要的
    // 赋值给对应的项 find includes
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]

    // 循环 及查找
    // dataList.forEach(v => {
    //   // 找到 名字开头部分相同的元素
    //   const res = provinceData.find(pv => {
    //     if (pv.name.includes(v.name)) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })
    //   // 检索之后的结果
    //   // console.log('res:', res)
    //   // 找到了对应的那个元素之后 赋值value属性
    //   if (res !== undefined) {
    //     v.value = res.value
    //   }
    // })
    // 简化版本
    dataList.forEach(v => {
      // 找到 名字开头部分相同的元素
      const res = provinceData.find(pv => pv.name.includes(v.name))
      // 检索之后的结果
      // 找到了对应的那个元素之后 赋值value属性
      // 逻辑短路 表达式1 && 表达式2 表达式1为真才会解析表达式2
      res && (v.value = res.value)
    })
    console.log('dataList:', dataList)

    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        // 左侧虚拟导航的 数值分布
        text: ['15', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0']
        },
        show: true,
        left: 40
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)'
          }
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff'
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList
        }
      ]
    }

    // 基于选项 生成图表
    myEchart.setOption(option)
  }

  initMapChart(provinceData)
}
// 调用一次
func()
